<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <title>testBackbone V2</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
    <!-- build:js scripts/vendor/modernizr.js -->
    <script src="/bower_components/modernizr/modernizr.js"></script>
    <!-- endbuild -->
</head>

<body>
    <!--[if lt IE 10]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
   
    <div class="container">
        <div class="header">
            <h3 class="text-muted">Hello loki's world</h3>
        </div>
        <div class="row marketing">
            <div class="col-lg-6">
                <div id="divTip">点击我</div>
            </div>
            <div class="col-lg-6">
                <div id="divTip">sublime git tool test
                </div>
            </div>
            <ul id="element">
                <li>
                    <span>学号</span>
                    <span>姓名</span>
                    <span>性别</span>
                    <span>总分</span>
                </li>
            </ul>
            <div id="view">
                <input type="button" value="显示" id="btnSbow">
                <input type="button" value="隐藏" id="btnHide">
            </div>
            <div id="Info" style="display:none">
                <p>hello world !!!</p>
            </div>
        </div>
        <div class="footer">
            <p><span class="glyphicon glyphicon-heart"></span> from Lokia</p>
        </div>
    </div>
    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="/bower_components/jquery/dist/jquery.js"></script>
    <script src="/bower_components/underscore/underscore.js"></script>
    <script src="/bower_components/backbone/backbone.js"></script>
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:js(.) scripts/plugins.js -->
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/affix.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/alert.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/modal.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/transition.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/button.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/carousel.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/scrollspy.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/collapse.js"></script>
    <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/tab.js"></script>
    <!-- endbuild -->
    <!-- build:js scripts/main.js -->
    <script src="scripts/main.js"></script>
    <!--<script type="text/javascript" src="scripts/simpleApi.js"></script>-->
    <script type="text/javascript" src="scripts/eventApi.js"></script>
    <!-- endbuild -->
    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
    (function(b, o, i, l, e, r) {
        b.GoogleAnalyticsObject = l;
        b[l] || (b[l] =
            function() {
                (b[l].q = b[l].q || []).push(arguments)
            });
        b[l].l = +new Date;
        e = o.createElement(i);
        r = o.getElementsByTagName(i)[0];
        e.src = 'https://www.google-analytics.com/analytics.js';
        r.parentNode.insertBefore(e, r)
    }(window, document, 'script', 'ga'));
    ga('create', 'UA-XXXXX-X');
    ga('send', 'pageview');
    </script>
     <script  type="text/template" id="tpl">
    <% var intSumScore = 0,intAveScore=0;
        for（var i= 0;i < list.length;i++）{ %>

        <% var item =list[i] %>
        <li>
        <span><%=item.StuId%></span>
        <span><%=item.Name%></span>
        <span><%=item.Sex%></span>
        <span><%=item.Score%></span>
        </li>
        <% intSumScore +=parseInt(item.Score);
            intAveScore= intSumScore/list.length;
        }%>
        <li>
            <span>平均分</span>
            <span><%=intAveScore%></span>
            <span>总分</span>
            <span><%=intSumScore%></span>
        </li>
    </script>                                                   
    <script>
    /*template 自定义模板*/
   /* var ele = $('#element');
        var tpl = $('#tpl').html();
        var Temdata ={
            list:[
                {StuId:'s0101',Name:'刘晓明',Sex:'0',Score:'345'},
                {StuId:'s0102',Name:'刘晓明',Sex:'0',Score:'345'},
                {StuId:'s0103',Name:'刘晓明',Sex:'0',Score:'345'},
                {StuId:'s0104',Name:'刘晓明',Sex:'0',Score:'345'}

            ]
        }
        console.log("lokia");
        console.log(tpl);
        console.log(Temdata);*/
        // var html =_.template(tpl,Temdata);
        // ele.append(html);

    </script>
    <script type="text/javascript">
    var InfoView = Backbone.View.extend({
            el:'#view',
            events:{
                'click #btnSbow':'ShowInfo',
                'clikc #btnHide':'HideInfo'
            },
            ShowInfo:function(){
                $('#Info').show();
                console.log("show");
            },
            HideInfo:function(){
                $('#Info').hide();
                console.log("hide");
            }
    });
    var view = new InfoView();
    console.log("Hello aaa");
    </script>
</body>

</html>
